<template>
  <div class="container"
       v-title
       data-title='写跟进'>
    <div class="mint-cell mint-field">
      <div class="mint-cell-wrapper">
        <div class="mint-cell-title">
          <span class="mint-cell-text">跟进事宜：</span>
        </div>
        <div class="mint-cell-value">
          <input style="width: 80%;"
                 type="text"
                 name="jjr"
                 placeholder="请选择"
                 v-model="follow.text"
                 @click="openPicker"
                 readonly>
        </div>
      </div>
    </div>
    <div class="mint-cell mint-field"
         v-if="visitedFlag"
         v-res="menu_0008_0002_0001_0004">
      <div class="mint-cell-wrapper">
        <div class="mint-cell-title">
          <span class="mint-cell-text">实际到访时间</span>
        </div>
        <div class="mint-cell-value">
          <input type="text"
                 name="date"
                 @click="openDatePicker"
                 placeholder="实际到访时间"
                 v-model="createTimeText"
                 readonly
                 :disabled="editVisitTimeFlag">
          <a class="edit-visited-time"
             @click="editVisitTime">修改实际到访时间</a>
          <!-- <mt-datetime-picker ref="datePicker"
                              type="datetime"
                              v-model="createTime"
                              @confirm="handleConfirm"></mt-datetime-picker> -->
        </div>
      </div>
    </div>
    <textarea class="followTextarea"
              placeholder="请填写跟进内容,200长度限制"
              v-model="remark"></textarea>

    <div class="unified-template"
         style="margin-top: 10px;padding: 10px;">
      <div class="titlePhoto">
        <div style="font-weight: 400;font-size:16px;">上传图片</div>
        <div style="font-size:12px;color:#ccc;">最多上传5张</div>
      </div>
      <ul class="photo-list">
        <li v-for="(row, index) in fileList">
          <img v-bind:src="row.file"
               @click="previewImage(index)">
          <i class="fa fa-times-circle"
             @click="deletefile(index)"></i>
        </li>
        <li class="departureBtn">
          <a href="javascript:;">
            <i class="fa fa-plus"></i>
          </a>
          <input type="file"
                 class="fileBtn"
                 @change="upload"
                 name="files"
                 id="files">
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>

    <div class="operationBtn">
      <button class="btn btn-line btn-primary"
              @click="btnSubmit">提交</button>
      <button class="btn btn-line btn-cancel"
              @click="btnCancel">取消</button>
    </div>
    <mt-popup v-model="followPickerVisible"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="picker-toolbar">
        <div class="mint-datetime-action  left"
             @click="followPickerVisible=false">取消</div>
        <div class="mint-datetime-action left"
             style="width:47%"
             @click="followPickerVisible=false">确定</div>
      </div>
      <mt-picker ref="followPicker"
                 :slots="slots"
                 :show-toolbar="true"
                 @change="onValuesChange"
                 valueKey="name"></mt-picker>
    </mt-popup>

    <!-- 手机号验真 -->
    <div class="popup-page"
         v-if="checkMobile.modelShow">
      <div class="popup-mask"></div>
      <div class="popup-container">
        <div class="popup-header">号码验真</div>
        <div class="popup-body"
             style="padding: 16px 10px 10px">
          <div class="complete-information">
            <p>号码尚未验真,发送并校验验证码</p>
            <div class="information-number">
              <div class="number-list">
                <span class="number-list-item">{{ checkCode.codeA }}</span>
                <span class="number-list-item">{{ checkCode.codeB }}</span>
                <span class="number-list-item">{{ checkCode.codeC }}</span>
                <span class="number-list-item">{{ checkCode.codeD }}</span>
              </div>
              <button type="button"
                      class="checkMobileBtn"
                      v-bind:disabled="checkMobile.codeDis"
                      @click="sendCheckCode">{{ checkMobile.verificationCode }}</button>
              <input type="tel"
                     maxlength="4"
                     class="number-input-box"
                     v-model="checkMobile.checkCode">
              <input type="text"
                     name="curPreId"
                     v-model="checkMobile.curPreId">
            </div>
          </div>
        </div>
        <div class="popup-footer">
          <a href="javascript:;"
             class="btn"
             @click="closeCheckMobileModel">取消</a>
          <a href="javascript:;"
             class="btn checkBtn"
             @click="checkCheckCode">确定</a>
        </div>
      </div>
    </div>
    <vant-popup v-model="popShow"
                position="bottom">
      <vant-datetime-picker v-model="createTime"
                            @confirm="handleConfirm"
                            @cancel="handleCancel"
                            ref="datePicker"
                            type="datetime" />
    </vant-popup>
  </div>
</template>
<script>
import Exif from "exif-js";
import { MessageBox, Toast } from "mint-ui";
import wx from "weixin-js-sdk";
import VantPopup from "vant/lib/popup";
import VantDatetimePicker from "vant/lib/datetime-picker";
import "vant/lib/popup/style";
import "vant/lib/datetime-picker/style";
export default {
  components: { VantPopup, VantDatetimePicker },
  data() {
    return {
      remark: "",
      btnShow: true,
      imageList: [],
      fileList: [],
      slots: [],
      createTime: "",
      createTimeText: "",
      followPickerVisible: false,
      visitedFlag: false,
      follow: {
        id: "",
        text: ""
      },
      editVisitTimeFlag: true,
      checkMobile: {
        id: "",
        row: {},
        modelShow: false,
        checkCode: "",
        codeDis: false,
        verificationCode: "发送验证码",
        checkMobileBtnShow: false,
        checkMobileDesc: "",
        checkFlag: false
      },
      popShow: false
    };
  },
  created() {
    let dealRes = {
      menu_0008_0002_0001_0001: false, //普通跟进
      menu_0008_0002_0001_0002: false, //电话跟进
      menu_0008_0002_0001_0003: false //到访
    };
    var res = JSON.parse(window.sessionStorage.getItem("2_resources"));
    for (let index = 0; index < res.length; index++) {
      const item = res[index];
      if (dealRes.hasOwnProperty(item)) {
        dealRes[item] = true;
      }
    }
    let values = [];
    let customerStatus = this.$route.params.customerStatus;
    let confirmStatus = this.$route.params.confirmStatus;
    values.push({ id: 4, name: "内部跟进（仅本部机构可见）" });
    if (dealRes.menu_0008_0002_0001_0001)
      values.push({ id: 1, name: "普通跟进（本部/分销机构均可见）" });
    // if(dealRes.menu_0008_0002_0001_0002) values.push({id:2,name:'电话跟进'})
    if (
      dealRes.menu_0008_0002_0001_0003 &&
      customerStatus == 6 &&
      confirmStatus == 0
    )
      values.push({ id: 3, name: "到访" });

    this.slots.push({ defaultIndex: 0, values: values });
  },
  computed: {
    checkCode() {
      let codeA, codeB, codeC, codeD;
      if (this.checkMobile.checkCode.length > 0) {
        codeA = this.checkMobile.checkCode.substring(0, 1);
        codeB = this.checkMobile.checkCode.substring(1, 2);
        codeC = this.checkMobile.checkCode.substring(2, 3);
        codeD = this.checkMobile.checkCode.substring(3, 4);
      }
      return {
        codeA,
        codeB,
        codeC,
        codeD
      };
    }
  },
  mounted() {},
  methods: {
    btnCancel() {
      var id = this.$route.params.cusPreId;
      this.$router.replace({
        path: "/customerDetails/" + id
      });
    },
    btnSubmit() {
      var _self = this;

      var id = this.$route.params.cusPreId;
      var checkSwitch = this.$route.params.checkSwitch;
      var lastCheckTime = this.$route.paramslastCheckTime;

      // 到访跟进、楼盘要验真、手机号未验真、不是隐号-->打开验真操作
      if (
        this.visitedFlag &&
        checkSwitch == "1" &&
        !this.checkMobile.checkFlag
      ) {
        _self.checkMobile.id = id;
        _self.checkMobile.modelShow = true;
        return;
      }

      if (!_self.remark) {
        layer.msg("请填写跟进内容", {
          time: 2000
        });
        return;
      }
      if (_self.remark.length > 200) {
        layer.msg("跟进内容不能超过200字符", {
          time: 2000
        });
        return;
      }
      if (!_self.btnShow) {
        layer.msg("请勿重复提交", {
          time: 2000
        });
        return;
      }
      _self.btnShow = false;
      var params = {};
      params.remark = _self.remark;
      params.affixList = _self.imageList;
      params.createTime = _self.createTime;
      params.followType = _self.follow.id;
      //客户报备记录Id
      var id = this.$route.params.cusPreId;
      params.customerPremisesId = id;
      var body = {};
      body.params = params;
      var url = this.utilHelper.apiUrl + "/api/addFollow";
      this.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == 1) {
          layer.msg(
            "操作成功",
            {
              time: 2000
            },
            function () {
              _self.$router.replace({
                path: "/customerDetails/" + id
              });
            }
          );
        } else {
          _self.btnShow = true;
          layer.msg("操作失败:" + body.resultMsg, {
            time: 2000
          });
        }
      });
    },

    //////////////////////////图片上传//////////////////////////
    upload(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.picValue = files[0];
      this.imgPreview(this.picValue);
    },
    imgPreview(file) {
      let self = this;
      let Orientation;
      //去获取拍照时的信息，解决拍出来的照片旋转问题
      Exif.getData(file, function () {
        Orientation = Exif.getTag(this, "Orientation");
      });
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;

      if (/^image/.test(file.type)) {
        // 创建一个reader
        let reader = new FileReader();
        // 将图片2将转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onloadend = function () {
          let result = this.result;
          let img = new Image();
          img.src = result;
          //判断图片是否大于1m,是就直接上传，反之压缩图片
          if (this.result.length <= 500 * 1024) {
            self.ajaxfile(this.result);
          } else {
            img.onload = function () {
              let data = self.compress(img, Orientation);
              self.ajaxfile(data);
            };
          }
        };
      }
    },
    rotateImg(img, direction, canvas) {
      //最小与最大旋转方向，图片旋转4次后回到原方向
      const min_step = 0;
      const max_step = 3;
      if (img == null) return;
      //img的高度和宽度不能在img元素隐藏后获取，否则会出错
      let height = img.height;
      let width = img.width;
      let step = 2;
      if (step == null) {
        step = min_step;
      }
      if (direction == "right") {
        step++;
        //旋转到原位置，即超过最大值
        step > max_step && (step = min_step);
      } else {
        step--;
        step < min_step && (step = max_step);
      }
      //旋转角度以弧度值为参数
      let degree = (step * 90 * Math.PI) / 180;
      let ctx = canvas.getContext("2d");
      switch (step) {
        case 0:
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0);
          break;
        case 1:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, 0, -height);
          break;
        case 2:
          canvas.width = width;
          canvas.height = height;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, -height);
          break;
        case 3:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, 0);
          break;
      }
    },
    compress(img, Orientation) {
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      //瓦片canvas
      let tCanvas = document.createElement("canvas");
      let tctx = tCanvas.getContext("2d");
      let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
      let ratio;
      if ((ratio = (width * height) / 4000000) > 1) {
        // 大于400万像素
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
      } else {
        ratio = 1;
      }
      canvas.width = width;
      canvas.height = height;
      //        铺底色
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      //如果图片像素大于100万则使用瓦片绘制
      let count;
      if ((count = (width * height) / 1000000) > 1) {
        // console.log("超过100W像素");
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
        //            计算每块瓦片的宽和高
        let nw = ~~(width / count);
        let nh = ~~(height / count);
        tCanvas.width = nw;
        tCanvas.height = nh;
        for (let i = 0; i < count; i++) {
          for (let j = 0; j < count; j++) {
            tctx.drawImage(
              img,
              i * nw * ratio,
              j * nh * ratio,
              nw * ratio,
              nh * ratio,
              0,
              0,
              nw,
              nh
            );
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
          }
        }
      } else {
        ctx.drawImage(img, 0, 0, width, height);
      }
      //修复ios上传图片的时候 被旋转的问题
      if (Orientation != "" && Orientation != 1) {
        switch (Orientation) {
          case 6: //需要顺时针（向左）90度旋转
            this.rotateImg(img, "left", canvas);
            break;
          case 8: //需要逆时针（向右）90度旋转
            this.rotateImg(img, "right", canvas);
            break;
          case 3: //需要180度旋转
            this.rotateImg(img, "right", canvas); //转两次
            this.rotateImg(img, "right", canvas);
            break;
        }
      }
      //进行最小压缩
      let ndata = canvas.toDataURL("image/jpeg", 0.1);
      //console.log('压缩前：' + initSize);
      //console.log('压缩后：' + ndata.length);
      //console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
      return ndata;
    },
    //////////////////////////图片上传//////////////////////////
    /////////////////////////////////////图片上传方法//////////////////////////////////////////
    createImage(file) {
      var _self = this;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        _self.ajaxfile(e.target.result);
      };
    },
    //将base64转换blob
    dataURLtoBlob(dataUrl) {
      var arr = dataUrl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    //上传图片
    ajaxfile(file) {
      var _self = this;
      if (_self.imageList.length == 5) {
        layer.msg("最多上传5张图片");
        return;
      }
      var myForm = new FormData(); //创建formdata
      var blobBin = _self.dataURLtoBlob(file); //base64转换blob
      myForm.append("blobObject", blobBin); //想formData添加blob数据
      var url = _self.utilHelper.apiUrl + "/api/uploadBase64";
      _self.$http.post(url, myForm).then((response) => {
        layer.closeAll("loading"); //关闭加载层
        var data = response.body;
        if (data.result == "1") {
          var filesUrl = {
            url: data.resData.imgName,
            isQiNiu: false
          };
          _self.imageList.push(filesUrl);
          var fileName = {
            file: file
          };
          _self.fileList.push(fileName);
        } else {
          layer.msg("图片上传失败，请重试");
        }
      });
    },
    //图片预览
    previewImage(index) {
      var _self = this;
      var imgList = new Array();
      for (var i = 0; i < _self.imageList.length; i++) {
        imgList.push(_self.imageList[i].url);
      }
      wx.previewImage({
        current: imgList[index],
        urls: imgList
      });
    },
    //删除图片
    deletefile(id) {
      this.imageList.splice(id, 1);
      this.fileList.splice(id, 1);
    },
    /////////////////////////////////////图片上传方法//////////////////////////////////////////
    openDatePicker() {
      // this.$refs.datePicker.open();
      this.popShow = true;
    },
    openPicker() {
      this.follow.id = this.slots[0].values[this.slots[0].defaultIndex].id;
      this.follow.text = this.slots[0].values[this.slots[0].defaultIndex].name;
      this.followPickerVisible = true;
    },
    onValuesChange(picker) {
      var type = picker.getSlotValue(0);
      if (type && type.id == 3) {
        //若为到访
        this.visitedFlag = true;
        this.handleConfirm(new Date());
      } else {
        this.visitedFlag = false;
      }
      if (type) {
        this.follow.id = type.id;
        this.follow.text = type.name;
      }
    },
    handleConfirm(e) {
      var date = new Date(e);
      var visitProtectDate =
        date.getFullYear() +
        "-" +
        this.fomrtDate(date.getMonth() + 1) +
        "-" +
        this.fomrtDate(date.getDate()) +
        " " +
        this.fomrtDate(date.getHours()) +
        ":" +
        this.fomrtDate(date.getMinutes());
      ":" + this.fomrtDate(date.getSeconds());
      this.createTimeText = visitProtectDate;
      this.createTime = date;
      this.popShow = false;
    },
    handleCancel() {
      this.popShow = false;
    },
    fomrtDate(n) {
      return n >= 10 ? n : "0" + n;
    },
    editVisitTime() {
      this.editVisitTimeFlag = false;
      this.openDatePicker();
    },
    closeCheckMobileModel() {
      var _self = this;
      _self.checkMobile.modelShow = false;
    },
    sendCheckCode() {
      var _self = this;
      if (!_self.checkMobile.id) {
        layer.msg("报备记录错误,请重新打开!");
        return;
      }
      //设置不能点击
      _self.checkMobile.codeDis = "disabled";

      var body = {};
      var params = {
        id: _self.checkMobile.id
      };
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/sendMobileCheckCode";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == 1) {
          layer.msg(body.resData.resultMsg);
          _self.verificationCodeTimer(false);
        } else {
          _self.checkMobile.codeDis = false;
          layer.alert(body.resData.resultMsg, { icon: 5 });
        }
      }),
        (response) => {
          _self.checkMobile.codeDis = false;
          layer.alert("发送短信异常", { icon: 5 });
        };
    },
    checkCheckCode() {
      var _self = this;
      var body = {};
      var params = {
        id: _self.checkMobile.id,
        checkCode: _self.checkMobile.checkCode
      };
      if (!_self.checkMobile.checkCode) {
        Toast({
          message: "请输入验证码!",
          position: "middle",
          duration: 2000
        });
        return;
      }
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/checkMobileCheckCode";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == 1) {
          Toast({
            message: "号码验真成功",
            position: "middle",
            duration: 2000
          });
          _self.checkMobile.row.mobileCheck = "1";
          _self.checkMobile.row.lastCheckTime = new Date();
          _self.checkMobile.checkMobileBtnShow = false;
          _self.checkMobile.checkMobileDesc = "已验真";
          _self.checkMobile.checkFlag = true;
          _self.closeCheckMobileModel();
        } else {
          layer.msg("号码验真失败: " + body.resData.resultMsg);
        }
        _self.checkMobile.checkCode = "";
      }),
        (response) => {
          _self.codeDis = false;
          layer.alert("验真异常", { icon: 5 });
        };
    },
    //短信验证码定时器
    verificationCodeTimer: function (flag) {
      var _self = this;
      var date = 0;
      if (flag) {
        //页面刷新，或重进入时
        if (window.sessionStorage.getItem("checkMobileDate")) {
          //若缓存中不存在数据则 不进行倒计时
          date = window.sessionStorage.getItem("checkMobileDate");
          if (window.sessionStorage.getItem("checkMobileObj")) {
            _self.params.id = window.sessionStorage.getItem("checkMobileObj");
          }
        } else {
          return;
        }
      } else {
        //点击发送按钮时
        date = new Date().getTime() + 1000 * 30;
        window.sessionStorage.setItem("checkMobileDate", date);
        window.sessionStorage.setItem("checkMobileObj", _self.checkMobile.id);
        _self.timer = 40;
      }

      _self.checkMobile.codeDis = "disabled";
      var code = setInterval(function () {
        _self.timer = Math.ceil((date - new Date().getTime()) / 1000); //向上取整数
        if (_self.timer <= 0) {
          window.sessionStorage.removeItem("checkMobileDate");
          window.sessionStorage.removeItem("checkMobileObj");
          _self.checkMobile.verificationCode = "发送验证码";
          _self.checkMobile.codeDis = false;
          window.clearInterval(code);
        } else {
          _self.checkMobile.verificationCode = "重新获取(" + _self.timer + ")";
          _self.timer -= 1;
        }
      }, 1000);
    }
  }
};
</script>
<style scoped>
.followTextarea {
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
  margin-top: 15px;
}

.unified-template {
  padding: 0 10px;
  background-color: #fff;
}

.titlePhoto {
  font-weight: normal;
  padding: 10px;
  float: left;
}
.photo-list {
  float: left;
}
.photo-list li {
  float: left;
  width: 64px;
  height: 64px;
  position: relative;
  border: 1px solid #cdcdcd;
  margin: 0 5px 10px;
}
.photo-list li > img {
  width: 100%;
  height: 100%;
}
.photo-list > li .fa-times-circle {
  position: absolute;
  right: -8px;
  top: -8px;
  color: #ff6666;
  font-size: 18px;
}
.photo-list .departureBtn {
  border: none;
}
.departureBtn > a {
  border: 1px dashed #7f7f7f;
  height: 100%;
  display: block;
  text-align: center;
}
.departureBtn > a .fa-plus {
  font-size: 30px;
  color: #7f7f7f;
  margin-top: 16px;
}
.departureBtn .fileBtn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
}

.clearfix:after,
.container:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

.operationBtn {
  margin-top: 56px;
  padding: 0 12px;
}
.btn {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42;
  position: relative;
  color: #fff;
  display: inline-block;
  margin-bottom: 0;
  padding: 6px 21px;
  cursor: pointer;
  -webkit-transition: all;
  transition: all;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  color: #333;
  border-radius: 3px;
  background-color: #fff;
}
.btn-primary {
  background-color: #ff7900;
  color: #fff;
}
.btn-line {
  display: block;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.btn-cancel {
  background-color: #999;
  color: #fff;
}
.edit-visited-time {
  color: #f90;
  font-size: 12px;
  width: 50px;
}

/*弹出层*/
.popup-page,
.popup-mask {
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.popup-mask {
  background-color: #000;
  opacity: 0.3;
}
.popup-container {
  width: 260px;
  position: relative;
  background-color: #fff;
  top: 160px;
  left: 50%;
  margin-left: -130px;
  z-index: 100;
  border-radius: 6px;
}
.popup-header {
  padding: 12px 20px;
  border-bottom: 1px solid #cdcdcd;
}
.popup-body {
  padding: 16px 20px 10px;
}
.invalid-list li {
  position: relative;
  padding-left: 24px;
  line-height: 20px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.checkIcon {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  background: url(../../assets/images/checked.png) no-repeat;
  background-position: 0 0;
  background-size: 36px auto;
  top: 1px;
}
.invalid-list li:last-child {
  margin-bottom: 0;
}
.invalid-list .active .checkIcon {
  background-position: -18px 0;
}
.invalid-list .reason {
  border: 1px solid #cdcdcd;
  width: 100%;
  margin-top: 4px;
  display: none;
}
.invalid-list .active .reason {
  display: block;
}
.popup-footer {
  width: 100%;
  border-top: 1px solid #cdcdcd;
}
.popup-footer .btn {
  width: 50%;
  text-align: center;
  float: left;
  padding: 12px 0;
  font-size: 16px;
  color: #999;
}
.popup-footer .checkBtn {
  color: #eb6100;
}
.popup-footer .btn:first-child {
  border-right: 1px solid #cdcdcd;
}
.popup-footer:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

.complete-information {
  text-align: center;
}
.information-number {
  position: relative;
  line-height: 34px;
  padding-left: 8px;
  margin-top: 8px;
}
.information-number .existingNumer,
.information-number .number-list {
  float: left;
}
.existingNumer {
  display: inline-block;
}
.number-list {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #cdcdcd;
  height: 34px;
  line-height: 32px;
  margin: 0 6px;
}
.number-list .number-list-item {
  width: 30px;
  height: 100%;
  display: inline-block;
  border-right: 1px solid #cdcdcd;
  float: left;
}
.number-list .number-list-item:last-child {
  border-right: none;
}
.number-input-box {
  position: absolute;
  height: 34px;
  left: 40px;
  width: 135px;
  opacity: 0;
}

.checkMobileBtn {
  width: 70px;
  height: 25px;
  color: #fff;
  background-color: #eb6100;
  border-radius: 10px;
}
</style>